<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          ><i class="el-icon-lx-cascades"></i> 用户列表</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <!-- <el-button
          type="primary"
          icon="delete"
          class="handle-del mr10"
          @click="delAll"
          >批量删除</el-button
        >
        <el-select
          v-model="select_cate"
          placeholder="筛选省份"
          class="handle-select mr10"
        >
          <el-option key="1" label="广东省" value="广东省"></el-option>
          <el-option key="2" label="湖南省" value="湖南省"></el-option>
        </el-select> -->
        <el-input
          v-model="userName"
          placeholder="筛选名称"
          class="handle-input mr10"
        ></el-input>
        <br />
        <img @click="code" :src="img" alt="" />
        <br />
        <el-button type="primary" icon="search" @click="search">搜索</el-button>
        <el-button type="primary" icon="search" @click="handClick('add')"
          >添加</el-button
        >
        <el-button type="primary" icon="search" @click="getPublicKey"
          >登录</el-button
        >
        {{ total }}
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="taskId" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="applicant" label="融资申请人"> </el-table-column>

        <el-table-column
          prop="queryStatus"
          align="center"
          label="查询状态"
          width="90"
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.queryStatus == '1'
                  ? 'success'
                  : scope.row.queryStatus == '2'
                  ? 'danger'
                  : ''
              "
              >{{
                scope.row.queryStatus == '1'
                  ? '查询成功'
                  : scope.row.queryStatus == '2'
                  ? '查询失败'
                  : '查询中'
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="hitStatus"
          align="center"
          label="命中状态"
          width="80"
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.hitStatus == '1'
                  ? 'success'
                  : scope.row.hitStatus == '0'
                  ? 'danger'
                  : ''
              "
              >{{
                scope.row.hitStatus == '1'
                  ? '命中'
                  : scope.row.hitStatus == '0'
                  ? '未命中'
                  : '待确认'
              }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column prop="keyWords" align="center" label="其他关键字">
          <template slot-scope="scope">
            <span v-if="scope.row.keyWords.length == 0">---</span>
            <div v-else>
              <span
                class="text"
                v-for="(item, index) in scope.row.keyWords"
                :key="index"
              >
                {{ item }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="invoices" align="center" label="发票信息">
          <template slot-scope="scope">
            <span v-if="scope.row.invoices.length == 0">---</span>
            <div v-else>
              <span
                class="text"
                v-for="(item, index) in scope.row.invoices"
                :key="index"
              >
                {{ item }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="attach"
          align="center"
          label="启用附件查重"
          width="110"
        >
          <template slot-scope="scope">
            {{ scope.row.attach ? '是' : '否' }}
          </template>
        </el-table-column>

        <el-table-column prop="creator" label="创建人" width="150">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handClick('edit', scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.row)"
              >删除
            </el-button>
            <el-button type="text" @click="detail(scope.row)">详情 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 添加/编辑弹出框 -->
    <el-dialog title="添加" :visible.sync="editVisible" width="500px">
      <el-form ref="formEdit" :model="formEdit" label-width="90px">
        <el-form-item label="姓名：">
          <el-input
            v-model="formEdit.userName"
            @input="formEdit.userName = formEdit.userName.replace(/\s*/g, '')"
            @blur="blur"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录账号：">
          <el-input disabled v-model="formEdit.account"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="formEdit.sex" label="1">男</el-radio>
          <el-radio v-model="formEdit.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="edm账号：">
          <el-input v-model="formEdit.edmAccount"></el-input>
        </el-form-item>
        <el-form-item label="edm密码：">
          <el-input v-model="formEdit.edmPassword"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="formEdit.email"></el-input>
        </el-form-item>
        <el-form-item label="打卡状态：">
          <el-radio v-model="formEdit.isActive" label="0">开启</el-radio>
          <el-radio v-model="formEdit.isActive" label="1">关闭</el-radio>
        </el-form-item>
        <el-form-item label="打卡地点：">
          <template v-if="type == 'add'"> 默认 </template>
          <template v-else>
            <dkInfo
              @changePlace="changePlace"
              :isShow="editVisible"
              :params="formEdit"
            />
          </template>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="formEdit.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">
        可选物理删除或逻辑删除，物理删除不可恢复，请选择？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRow(false)">逻辑删除</el-button>
        <el-button type="primary" @click="deleteRow(true)">物理删除</el-button>
      </span>
    </el-dialog>
    <!-- 详情展示框 -->
    <el-dialog
      title="打卡详情"
      :visible.sync="infoVisible"
      width="900px"
      center
    >
      <!-- <dkInfo :isShow="infoVisible" :params="formEdit" /> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import user from '@/api/user';
import { pinyin } from 'pinyin-pro';
import dkInfo from './dkInfo.vue';
import { encryptedData, decrypt } from './util';
export default {
  name: 'basetable',
  components: {
    dkInfo,
  },
  data() {
    return {
      img: '',
      userId: '',
      url: './vuetable.json',
      total: 0,
      userName: '',
      tableData: [],
      cur_page: 1,
      pageSize: 10,
      multipleSelection: [],
      select_cate: '',
      select_word: '',
      del_list: [],
      is_search: false,
      editVisible: false,
      delVisible: false,
      infoVisible: false,
      type: 'add',
      formEdit: {
        userId: '',
        userName: '',
        sex: '1',
        account: '',
        password: '',
        edmAccount: '',
        edmPassword: '',
        email: '',
        isDelete: '0',
        isActive: '0',
        token: '',
        place: '',
        remark: '这个人很懒，什么都没有留下~',
      },
      idx: -1,
    };
  },
  created() {
    this.getData();
    this.code();
  },
  // computed: {
  //   data() {
  //     return this.tableData.filter((d) => {
  //       let is_del = false;
  //       for (let i = 0; i < this.del_list.length; i++) {
  //         if (d.name === this.del_list[i].name) {
  //           is_del = true;
  //           break;
  //         }
  //       }
  //       if (!is_del) {
  //         if (
  //           d.address.indexOf(this.select_cate) > -1 &&
  //           (d.name.indexOf(this.select_word) > -1 ||
  //             d.address.indexOf(this.select_word) > -1)
  //         ) {
  //           return d;
  //         }
  //       }
  //     });
  //   },
  // },
  methods: {
    getPublicKey() {
      console.log(encryptedData('Aa123456!'));
      user
        .getPublicKey()
        .then((res) => {
          console.log(res.data, 'oooooooooo');
          let obj = {
            password: encryptedData(res.data, 'Aa123456!'),
            picCheckCode: this.userName,
            userName: 'youchubank',
          };
          this.login(obj);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    login(obj) {
      user
        .login(obj)
        .then((res) => {
          console.log(res, 'oooooooooo');
          console.log(res.data, 'oooooooooo');
          if (res.data) {
            this.$message({
              message: '登录成功!',
              type: 'success',
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    code() {
      let index = new Date().getTime();
      console.log(index);
      user
        .code(index)
        .then((res) => {
          console.log(res.data);
          this.img = window.URL.createObjectURL(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    detail(val) {
      this.$router.push('/table2');
      sessionStorage.setItem('hitDetail', JSON.stringify(val));
    },
    blur() {
      console.log(this.formEdit.account);
      this.formEdit.account = pinyin(this.formEdit.userName, {
        toneType: 'none',
      }).replace(/\s*/g, '');
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    // 获取 easy-mock 的模拟数据
    getData() {
      // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
      if (process.env.NODE_ENV === 'development') {
        this.url = '/api/users/query';
      }
      this.search();
    },
    search() {
      this.is_search = true;
      user
        .queryList({ current: 1, size: 25 })
        .then((res) => {
          console.log(res, 'oooooooooo');
          console.log(res.data, 'oooooooooo');
          if (res.data) {
            console.log(res.data);
            this.tableData = res.data.records;
            this.total = res.data.records.length;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    handleLook(row) {
      if (row.token) {
        this.formEdit = JSON.parse(JSON.stringify(row));
        this.infoVisible = true;
      } else {
        this.$message({
          message: '没有token!',
          type: 'warning',
        });
      }
    },
    handleDelete(row) {
      this.userId = row.userId;
      this.delVisible = true;
    },
    delAll() {
      const length = this.multipleSelection.length;
      let str = '';
      this.del_list = this.del_list.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + ' ';
      }
      this.$message.error('删除了' + str);
      this.multipleSelection = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //添加用户
    handClick(type, row) {
      this.type = type;
      if (type == 'add') {
        this.formEdit = {
          userId: '',
          userName: '',
          sex: '1',
          account: '',
          password: '',
          edmAccount: '',
          edmPassword: '',
          email: '',
          isDelete: '0',
          isActive: '0',
          token: '',
          place: '0',
          remark: '这个人很懒，什么都没有留下~',
        };
      } else {
        this.formEdit = JSON.parse(JSON.stringify(row));
      }
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      if (this.type == 'add') {
        this.add();
      } else {
        this.edit();
      }
    },
    //修改打卡地点
    changePlace(val) {
      this.formEdit.place = val;
    },

    //修改接口
    edit() {
      user
        .edit(this.formEdit)
        .then((res) => {
          console.log(res.data);
          this.editVisible = false;
          if (res.data) {
            this.$message({
              message: '修改成功!',
              type: 'success',
            });
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //添加接口
    add() {
      user
        .add(this.formEdit)
        .then((res) => {
          console.log(res.data);
          this.editVisible = false;
          if (res.data) {
            this.$message({
              message: '添加成功!',
              type: 'success',
            });
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 确定删除
    deleteRow(isSure) {
      user
        .remove({ isSure, userId: this.userId })
        .then((res) => {
          console.log(res.data);
          this.delVisible = false;
          if (res.data) {
            this.$message({
              message: '删除成功!',
              type: 'success',
            });
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.text {
  background: lightgray;
  margin: 0 5px;
}
</style>
